import { Button, Card, Input, Form, InputNumber, Radio} from 'antd';
import { connect} from 'umi';
import React, { useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './style.less';

const FormItem = Form.Item;

const BasicForm = props => {
  const { submitting ,currentSite, dispatch} = props;
  const [form] = Form.useForm();

  useEffect(() => {
    if (dispatch) {
       dispatch({
         type: 'cubeSite/fetchSite',
         payload: {
           id:props.match.params.siteId
         },
       }).then(()=>{
         form.resetFields()
       })
     }
   }, []);
  const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 7,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 12,
      },
      md: {
        span: 10,
      },
    },
  };
  const submitFormLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 10,
        offset: 7,
      },
    },
  };

  const onFinish = async() => {
    const values = await form.validateFields();
    const { dispatch } = props;
    values.venueId=props.match.params.id
    values.id=props.match.params.siteId
    dispatch({
      type: 'cubeSite/update',
      payload: values,
    });
  };

  return (
    <PageHeaderWrapper>
      <Card bordered={false}>
        <Form
          style={{
            marginTop: 8,
          }}
          form={form}
          name="basic"
          initialValues={currentSite}
        >
          <FormItem
            {...formItemLayout}
            label="场地名称"
            name="name"
            rules={[
              {
                required: true,
                message: '请输入场地名称',
              },
            ]}
          >
            <Input placeholder="请输入"/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="容纳人数"
            name="accommodationNumber"
            rules={[
              {
                required: true,
                message: '请输入容纳人数',
              },
            ]}
          >
            <InputNumber
              placeholder="请输入"
              min={0}
            />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="用途"
            name="usePurpose"
            rules={[
              {
                required: true,
                message: '请选择用途',
              },
            ]}
          >
            <Radio.Group>
                <Radio value="1">
                团课
                </Radio>
                <Radio value="2">
                私教
                </Radio>
                <Radio value="3">
                团课+私教
                </Radio>
              </Radio.Group>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="状态"
            name="status"
            rules={[
              {
                required: true,
                message: '请选择场馆状态',
              },
            ]}
          >
            <Radio.Group>
                <Radio value="1">
                  正常
                </Radio>
                <Radio value="2">
                  暂停
                </Radio>
              </Radio.Group>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="排序"
            name="orderNum"
            rules={[
              {
                required: true,
                message: '请输入排序',
              },
            ]}
          >
            <InputNumber
              placeholder="请输入"
              min={0}
            />
          </FormItem>
          <FormItem
            {...submitFormLayout}
            style={{
              marginTop: 32,
            }}
          >
            <Button type="primary" onClick={onFinish} loading={submitting}>
             提交
            </Button>
            <Button
              style={{
                marginLeft: 8,
              }}
              onClick={()=>window.history.back()}
            >
              返回
            </Button>
          </FormItem>
        </Form>
      </Card>
    </PageHeaderWrapper>
  );
};

export default connect(({ loading,cubeSite }) => ({
  submitting: loading.effects['cubeSite/update'],
  currentSite:cubeSite.currentSite
}))(BasicForm);
